<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/Stargiftcard/navigation.css">
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
</head>

<body>
    <!-- 左侧导航栏 -->
    <div class="navigation">
        {{include './navi-header.html'}}
        <div class="select">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="active" aria-current="page" href="#"><b>星礼卡</b></a>
                </li>
                <li class="nav-item">
                    <a class="" href="#">关于星礼卡</a>
                </li>
                <li class="nav-item">
                    <a class=" disabled" href="/manage">管理星礼卡</a>
                </li>
                <li class="nav-item">
                    <a class="disabled" href="/bill">发票处理进度查询</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 右侧头部内容 -->
    <div class="content">
        {{ each giftcard }}
        <div class="giftcard">
            <span>{{$value.span}}</span>
            <div class="row giftcard-box">
                <div class="col-sm-6 left">
                    <div class="card card-box">
                        <div class="card-body card-content">
                            <p>{{$value.p1}}</p>
                            <h1 class="card-title">{{$value.h1}}</h1>
                            <p class="card-text">{{$value.p2}}</p>
                            <p class="card-text">{{$value.p3}}</p>
                            <a href="#" class="btn btn-button " id="button">{{$value.a}}</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 right">
                    <div class="card">
                        <div class="card-body card-img">
                            <img src="{{$value.img}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{ /each }}
    </div>
    <!-- 右侧中间内容购买方式 -->
    <div class="buy">
        <div class="buy-box">
            {{ each tmall }}
            <div class="tmall">
                <div class="tmall-top">
                    <p>{{$value.head}}</p>
                </div>
                <div class="tmall-content">
                    <h3>{{$value.title}}</h3>
                    <img src="{{$value.img1}}" alt="">
                </div>
                <div class="tmall-bottom">
                    <a href="https://starbucks.world.tmall.com/p/rd993825.htm?&scene=taobao_shop">{{$value.butn}}</a>
                </div>
                <img src="{{$value.img2}}" alt="" class="tmalllog">
            </div>
            {{ /each }} {{ each scancode }}
            <div class="scancode">
                <div class="scancode-top">
                    <p>{{$value.head}}</p>
                </div>
                <div class="scancode-content">
                    <div class="say-img">
                        <img src="{{$value.img1}}" alt="">
                    </div>
                    <div class="milktea-img">
                        <img src="{{$value.img2}}" alt="">
                    </div>
                </div>
                <div class="scancode-bottom">
                    <p>{{$value.title}}</p>
                </div>
            </div>
            {{ /each }} {{ each company }}
            <div class="company">
                <div class="company-top">
                    <p>{{$value.head}}</p>
                </div>
                <div class="company-content">
                    <p>{{$value.title1}}</p>
                    <p>{{$value.title2}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">{{$value.phone}}</a>{{$value.title3}}</p>
                </div>
                <div class="company-bottom">
                    <a href="/bylaws">{{$value.butn}}</a>
                </div>
                <img src="{{$value.img1}}" alt="" class="shoplog">
            </div>
            {{ /each }}
        </div>
    </div>
    <!-- 星礼卡系列 -->
    <div class="series">
        <div class="series-content">
            <div class="series-top">
                <h2>星巴克星礼卡系列</h2>
                <p class="series-text">5O元/100元/200元/30O元/500元(全国通用)</p>
                {{each series }}
                <div class="row row-cols-1 row-cols-md-3 g-4 box">
                    <div class="col cards">
                        <div class="card h-100 card-box">
                            <img src="{{$value.img1}}" class="card-img-top" alt="...">
                            <div class="card-body card-text">
                                <p>{{$value.title1_1}}<br>{{$value.title1_2}}</p>
                            </div>
                            <span>{{$value.head1}}</span>
                        </div>
                    </div>
                    <div class="col cards">
                        <div class="card h-100 card-box">
                            <img src="{{$value.img2}}" class="card-img-top" alt="...">
                            <div class="card-body card-text">
                                <p>{{$value.title2_1}}<br>{{$value.title2_2}}</p>
                            </div>
                            <span>{{$value.head2}}</span>
                        </div>
                    </div>
                    <div class="col cards">
                        <div class="card h-100 card-box">
                            <img src="{{$value.img3}}" class="card-img-top" alt="...">
                            <div class="card-body card-text">
                                <p>{{$value.title3_1}}<br>{{$value.title3_2}}<br>{{$value.title3_3}}</p>
                            </div>
                            <span>{{$value.head3}}</span>
                        </div>
                    </div>
                    <div class="col cards">
                        <div class="card h-100 card-box">
                            <img src="{{$value.img4}}" class="card-img-top" alt="...">
                            <div class="card-body card-text">
                                <p>{{$value.title4_1}}<br>{{$value.title4_2}}<br>{{$value.title4_3}}<br>{{$value.title4_4}}</p>
                            </div>
                            <span>{{$value.head4}}</span>
                        </div>
                    </div>
                    <div class="col cards">
                        <div class="card h-100 card-box">
                            <img src="{{$value.img5}}" class="card-img-top" alt="...">
                            <div class="card-body card-text">
                                <p>{{$value.title5_1}}<br>{{$value.title5_2}}<br>{{$value.title5_3}}</p>
                            </div>
                            <span>{{$value.head5}}</span>
                        </div>
                    </div>
                    <div class="col cards">
                        <div class="card h-100 card-box">
                            <img src="{{$value.img6}}" class="card-img-top" alt="...">
                            <div class="card-body card-text">
                                <p>{{$value.title6_1}}<br>{{$value.title6_2}}<br>{{$value.title6_3}}<br>{{$value.title6_4}}</p>
                            </div>
                            <span>{{$value.head6}}</span>
                        </div>
                    </div>
                </div>
                {{ /each }}
                <div class="but-tmall">
                    <a href="https://starbucks.world.tmall.com/p/rd993825.htm?&scene=taobao_shop">前往天猫购买</a>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/bootstrap/bootstrap.min.js"></script>

</html>